<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能黑板</title>
  <script src="tailwind.js"></script>
  <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="jquery.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',
            secondary: '#f97316',
            neutral: '#f3f4f6',
            dark: '#1f2937'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        }
      }
    }
  </script>
  <style>
    textarea:focus {
      outline: none;
    }
  </style>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .bg-glass {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(8px);
      }
      .scrollbar-thin {
        scrollbar-width: thin;
      }
      .scrollbar-thin::-webkit-scrollbar {
        width: 6px;
      }
      .scrollbar-thin::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.5);
        border-radius: 3px;
      }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen font-sans text-dark">
<!-- 顶部导航栏 -->
<header class="bg-glass shadow-md fixed top-0 left-0 right-0 z-50 transition-all duration-300">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="flex items-center space-x-2">
      <i class="fa fa-blackboard text-primary text-2xl"></i>
      <h1 class="text-xl font-bold text-primary">智能黑板</h1>
    </div>
    <div class="flex items-center space-x-4">

    </div>
  </div>
</header>

<!-- 主内容区 -->
<main class="container mx-auto px-4 pt-24 pb-16">
  <div class="max-w-6xl mx-auto">
    <!-- 输入区域 -->
    <div class="bg-white rounded-xl shadow-lg p-6 mb-8 transform transition-all duration-300 hover:shadow-xl">
      <h2 class="text-2xl font-bold mb-4 text-dark flex items-center">
        <i class="fa fa-pencil-alt text-primary mr-2"></i>
        书写区
      </h2>
      <div class="relative">
                    <textarea id="contentInput"
                              class="w-full h-96 p-4 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 scrollbar-thin resize-none"
                              placeholder="请输入内容... (最多支持40万行)"></textarea>
        <div class="absolute bottom-3 right-3 text-sm text-gray-500">
          <span id="lineCount">0</span> 行
        </div>
      </div>
      <div class="mt-4 flex justify-between items-center">
        <div class="text-sm text-gray-500">
          <i class="fa fa-info-circle text-primary"></i>
          <span> 每行内容将被自动保存</span>
        </div>
        <div class="flex">

          <button id="clearBtn" class="flex mr-2 items-center space-x-1 bg-red-50 hover:bg-red-100 text-red-500 px-3 py-2 rounded-lg transition-all duration-200">
            <i class="fa fa-trash"></i>
            <span>清空输入</span>
          </button>
          <button id="historyBtn" class="flex mr-2 items-center space-x-1 bg-primary/10 hover:bg-primary/20 text-primary px-3 py-2 rounded-lg transition-all duration-200">
            <i class="fa fa-history"></i>
            <span>历史记录</span>
          </button>
          <button id="freshBtn" class="flex mr-2 items-center space-x-1 bg-primary/10 hover:bg-primary/20 text-primary px-3 py-2 rounded-lg transition-all duration-200">
            <i class="fa fa-refresh"></i>
            <span>刷新内容</span>
          </button>
          <button class="J_copy mr-2 bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 flex items-center" data-clipboard-action="copy" data-clipboard-target="#contentInput">
            <i class="fa fa-copy mr-2"></i>
            <span>复制内容</span>
          </button>
          <button id="saveBtn"
                  class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 flex items-center">
            <i class="fa fa-save mr-2"></i>
            <span>保存内容</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 状态提示 -->
    <div id="status" class="fixed top-4 right-4 bg-white rounded-lg shadow-lg p-4 transform translate-y-20 opacity-0 transition-all duration-300 z-50 max-w-sm">
      <div class="flex items-start">
        <i id="statusIcon" class="fa fa-check-circle text-green-500 text-xl mt-0.5 mr-3"></i>
        <div>
          <h3 id="statusTitle" class="font-bold text-gray-800">成功</h3>
          <p id="statusMessage" class="text-sm text-gray-600 mt-1">内容已成功保存</p>
        </div>
        <button id="closeStatus" class="ml-4 text-gray-400 hover:text-gray-600">
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>

    <!-- 历史记录模态框 -->
    <div id="historyModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">
      <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[80vh] flex flex-col transform transition-all duration-300 scale-95 opacity-0" id="modalContent">
        <div class="p-5 border-b border-gray-100 flex justify-between items-center">
          <h3 class="text-xl font-bold text-dark flex items-center">
            <i class="fa fa-history text-primary mr-2"></i>
            历史记录
          </h3>
          <button id="closeModal" class="text-gray-400 hover:text-gray-600">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
        <div class="p-5 flex-grow overflow-y-auto scrollbar-thin" id="historyList">
          <!-- 历史记录将通过JS动态加载 -->
          <div class="flex items-center justify-center h-full text-gray-400">
            <i class="fa fa-folder-open-o text-4xl mr-3"></i>
            <div>
              <p class="text-lg">暂无历史记录</p>
              <p class="text-sm mt-1">保存的内容将显示在这里</p>
            </div>
          </div>
        </div>
        <div class="p-5 border-t border-gray-100 flex justify-end">
          <button id="clearAllHistory" class="bg-red-50 hover:bg-red-100 text-red-500 px-4 py-2 rounded-lg transition-all duration-200 flex items-center">
            <i class="fa fa-trash mr-2"></i>
            <span>清空所有记录</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-2" style="position: fixed; bottom: 0;width: 100%">
  <div class="container mx-auto px-4 text-center">
    <p class="text-sm">© 2025 智能黑板 | 所有内容仅保存24小时</p>
    <div class="mt-1 flex justify-center space-x-4">
      <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
        <i class="fa fa-question-circle"></i>
        <span class="ml-1">帮助</span>
      </a>
      <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
        <i class="fa fa-shield"></i>
        <span class="ml-1">隐私政策</span>
      </a>
    </div>
  </div>
</footer>
<script src="copy.js"></script>
<script>
  $(document).ready(function() {
    // 全局变量
    const baseUrl = 'http://10.8.3.28:3010'
    const MAX_LINES = 400000;
    let clickType = ''
    let isModalOpen = false;

    // 初始化
    updateLineCount();
    loadHistory();

    var clipboard = new ClipboardJS('.J_copy');

    clipboard.on('success', function(e) {
      showStatus('成功', '复制成功', 'success');
      e.clearSelection(); // 清除选中状态
    });

    // 监听文本区域变化
    $('#contentInput').on('input', function() {
      updateLineCount();
    });

    // 保存按钮点击事件
    $('#saveBtn').on('click', function() {
      const content = $('#contentInput').val().trim();

      if (!content) {
        showStatus('错误', '内容不能为空', 'error');
        return;
      }

      const lines = content.split('\n').length;
      if (lines > MAX_LINES) {
        showStatus('错误', `内容超过最大行数限制 (${MAX_LINES}行)`, 'error');
        return;
      }

      saveContent(content);
    });

    // 清空输入按钮
    $('#clearBtn').on('click', function() {
      if ($('#contentInput').val().trim()) {
        if (confirm('确定要清空当前输入内容吗？')) {
          $('#contentInput').val('');
          updateLineCount();
        }
      }
    });

    // 历史记录按钮
    $('#historyBtn').on('click', function() {
      toggleHistoryModal(true);
    });

    // 关闭模态框
    $('#closeModal').on('click', function() {
      toggleHistoryModal(false);
    });

    // 点击模态框外部关闭
    $('#historyModal').on('click', function(e) {
      if (e.target === this) {
        toggleHistoryModal(false);
      }
    });

    // 关闭状态提示
    $('#closeStatus').on('click', function() {
      hideStatus();
    });

    // 清空所有历史记录
    $('#clearAllHistory').on('click', function() {
      if (confirm('确定要清空所有历史记录吗？此操作不可恢复。')) {
        clearAllHistory();
      }
    });

    // 刷新内容
    $('#freshBtn').on('click', function (){
      loadHistory();
      clickType = 'refresh';
    });

    // 更新行数统计
    function updateLineCount() {
      const content = $('#contentInput').val();
      const lines = content.split('\n').length;
      $('#lineCount').text(lines);

      // 接近最大行数时显示警告
      if (lines > MAX_LINES * 0.9) {
        $('#lineCount').addClass('text-yellow-500');
      } else {
        $('#lineCount').removeClass('text-yellow-500');
      }
    }

    // 保存内容到服务器
    function saveContent(content) {
      $.ajax({
        url: baseUrl + '/save',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ content }),
        success: function(response) {
          if (response.success) {
            showStatus('成功', '内容已成功保存', 'success');
            // $('#contentInput').val('');
            updateLineCount();
            loadHistory();
          } else {
            showStatus('错误', response.message || '保存失败', 'error');
          }
        },
        error: function() {
          showStatus('错误', '服务器连接失败', 'error');
        }
      });
    }

    // 加载历史记录
    function loadHistory(type) {
      $.ajax({
        url: baseUrl + '/history',
        method: 'GET',
        success: function(response) {
          if (response.success && response.history && response.history.length > 0) {
            renderHistoryItems(response.history);
          } else {
            renderEmptyHistory();
          }
        },
        error: function() {
          showStatus('错误', '获取历史记录失败', 'error');
          renderEmptyHistory();
        }
      });
    }

    // 渲染历史记录项
    function renderHistoryItems(items) {
      const $historyList = $('#historyList');
      $historyList.empty();
      $('#contentInput').val(items[0].content);
      if(clickType === 'refresh'){
        showStatus('成功', '刷新内容成功', 'success');
      }

      items.forEach(item => {
        const date = new Date(item.timestamp);
        const formattedDate = date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        });

        const contentPreview = item.content.length > 200
                ? item.content.substring(0, 200) + '...'
                : item.content;

        const $item = $(`
                        <div class="border-b border-gray-100 last:border-0 pb-4 mb-4 last:mb-0" data-id="${item.id}">
                            <div class="flex justify-between items-start mb-2">
                                <h4 class="font-medium text-gray-800">${formattedDate}</h4>
                                <div class="flex space-x-2">
                                    <button class="view-history text-primary hover:text-primary/80 text-sm transition-colors duration-200">
                                        <i class="fa fa-eye mr-1"></i>查看
                                    </button>
                                    <button class="delete-history text-red-500 hover:text-red-600 text-sm transition-colors duration-200">
                                        <i class="fa fa-trash mr-1"></i>删除
                                    </button>
                                </div>
                            </div>
                            <div class="text-gray-600 text-sm whitespace-pre-line break-words">${contentPreview}</div>
                            <div class="text-xs text-gray-400 mt-2">
                                <span>${item.content.split('\n').length} 行</span>
                            </div>
                        </div>
                    `);

        $historyList.append($item);
      });

      // 绑定查看历史记录事件
      $('.view-history').on('click', function() {
        const $item = $(this).closest('[data-id]');
        const id = $item.data('id');
        viewHistoryItem(id);
      });

      // 绑定删除历史记录事件
      $('.delete-history').on('click', function() {
        const $item = $(this).closest('[data-id]');
        const id = $item.data('id');
        deleteHistoryItem(id);
      });
    }

    // 渲染空历史记录状态
    function renderEmptyHistory() {
      const $historyList = $('#historyList');
      $historyList.empty();
      $historyList.html(`
                    <div class="flex items-center justify-center h-full text-gray-400">
                        <i class="fa fa-folder-open-o text-4xl mr-3"></i>
                        <div>
                            <p class="text-lg">暂无历史记录</p>
                            <p class="text-sm mt-1">保存的内容将显示在这里</p>
                        </div>
                    </div>
                `);
    }

    // 查看历史记录项
    function viewHistoryItem(id) {
      $.ajax({
        url: baseUrl + `/history/${id}`,
        method: 'GET',
        success: function(response) {
          if (response.success && response.content) {
            $('#contentInput').val(response.content);
            updateLineCount();
            toggleHistoryModal(false);
            showStatus('成功', '历史内容已加载到输入框', 'success');
          } else {
            showStatus('错误', '获取历史记录失败', 'error');
          }
        },
        error: function() {
          showStatus('错误', '服务器连接失败', 'error');
        }
      });
    }

    // 删除单条历史记录
    function deleteHistoryItem(id) {
      if (confirm('确定要删除这条历史记录吗？')) {
        $.ajax({
          url: baseUrl + `/history_delete/${id}`,
          method: 'DELETE',
          success: function(response) {
            if (response.success) {
              showStatus('成功', '历史记录已删除', 'success');
              loadHistory();
            } else {
              showStatus('错误', response.message || '删除失败', 'error');
            }
          },
          error: function(error) {
            console.log(error)
            showStatus('错误', '服务器连接失败', 'error');
          }
        });
      }
    }

    // 清空所有历史记录
    function clearAllHistory() {
      $.ajax({
        url: baseUrl + '/history',
        method: 'DELETE',
        success: function(response) {
          if (response.success) {
            showStatus('成功', '所有历史记录已清空', 'success');
            loadHistory();
          } else {
            showStatus('错误', response.message || '清空失败', 'error');
          }
        },
        error: function() {
          showStatus('错误', '服务器连接失败', 'error');
        }
      });
    }

    // 显示状态提示
    function showStatus(title, message, type = 'success') {
      const $status = $('#status');
      const $statusTitle = $('#statusTitle');
      const $statusMessage = $('#statusMessage');
      const $statusIcon = $('#statusIcon');

      $statusTitle.text(title);
      $statusMessage.text(message);

      // 设置图标和颜色
      if (type === 'success') {
        $statusIcon.attr('class', 'fa fa-check-circle text-green-500 text-xl mt-0.5 mr-3');
      } else if (type === 'error') {
        $statusIcon.attr('class', 'fa fa-exclamation-circle text-red-500 text-xl mt-0.5 mr-3');
      } else if (type === 'warning') {
        $statusIcon.attr('class', 'fa fa-exclamation-triangle text-yellow-500 text-xl mt-0.5 mr-3');
      } else {
        $statusIcon.attr('class', 'fa fa-info-circle text-blue-500 text-xl mt-0.5 mr-3');
      }

      // 显示提示
      $status.removeClass('translate-y-20 opacity-0');
      $status.addClass('translate-y-0 opacity-100');

      // 自动隐藏
      setTimeout(hideStatus, 3000);
    }

    // 隐藏状态提示
    function hideStatus() {
      const $status = $('#status');
      $status.removeClass('translate-y-0 opacity-100');
      $status.addClass('translate-y-20 opacity-0');
    }

    // 切换历史记录模态框
    function toggleHistoryModal(open) {
      const $modal = $('#historyModal');
      const $modalContent = $('#modalContent');

      if (open && !isModalOpen) {
        $modal.css('display', 'flex');
        setTimeout(() => {
          $modalContent.removeClass('scale-95 opacity-0');
          $modalContent.addClass('scale-100 opacity-100');
        }, 10);
        isModalOpen = true;
      } else if (!open && isModalOpen) {
        $modalContent.removeClass('scale-100 opacity-100');
        $modalContent.addClass('scale-95 opacity-0');
        setTimeout(() => {
          $modal.css('display', 'none');
        }, 300);
        isModalOpen = false;
      }
    }

    // 监听滚动事件，改变导航栏样式
    $(window).on('scroll', function() {
      const $header = $('header');
      if ($(window).scrollTop() > 10) {
        $header.addClass('py-2 shadow-lg');
        $header.removeClass('py-3 shadow-md');
      } else {
        $header.addClass('py-3 shadow-md');
        $header.removeClass('py-2 shadow-lg');
      }
    });
  });
</script>
</body>
</html>
